import React from "react";
import { Descriptions } from 'antd';

import { mountModal, withModal, WrappedComponentProps} from "vendor/components/pro-hoc/withModal";
import type { LocalNetworkStore } from "../../model";

export const getLocalNetworkInfo = (localNetworkStore: LocalNetworkStore) => {
    const LocalNetworkInfoModal = withModal(LocalNetworkInfo);

    mountModal(<LocalNetworkInfoModal
        modalProps={{
            title: "局域网信息",
            footer: null,
        }}
        localNetworkStore={localNetworkStore}
    />)
}

interface LocalNetworkInfoProps extends WrappedComponentProps{
    localNetworkStore: LocalNetworkStore
}

const LocalNetworkInfo: React.FC<LocalNetworkInfoProps> = ({localNetworkStore}) => {
    const { getInitData, getCoverArea, localNetworkData } = localNetworkStore;
    const { localNetworkDeviceList } = getInitData();
    const {center, radius} = getCoverArea();

    return <Descriptions column={1} bordered>
        {localNetworkDeviceList.map(({label, value}) => {
            let count = 0;
            localNetworkData.deviceList.forEach((device) => {
                if (new RegExp(value+"$").test(device.id)) count++;
            })
            return <Descriptions.Item key={value} label={`${label}数量`}>{count}</Descriptions.Item>
        })}

        <Descriptions.Item label="区域中心点">{center.lng.toFixed(4)}, {center.lat.toFixed(4)}</Descriptions.Item>
        <Descriptions.Item label="通信覆盖面积(km²)">{(Math.PI * radius/1000 * radius / 1000).toFixed(4)}</Descriptions.Item>
    </Descriptions>
}
